<template>

	<div class="bo">
		<div class="face">
			<div class="earL"></div>
			<div class="earR"></div>
			<div class="eyeL"></div>
			<div class="eyeR"></div>
			<div class="hairs"></div>
			<div class="nose"></div>
			<div class="mouth"></div>
			<div class="smileL">
				<svg xml:space="preserve" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
					<filter id="blurMe">
						<feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
					</filter>
					<path
						d="M25 19c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
					<path
						d="M35 35c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
					<path
						d="M45 50c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
				</svg>
			</div>
			<div class="smileR">
				<svg xml:space="preserve" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
					<filter id="blurMe">
						<feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
					</filter>
					<path
						d="M25 19c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
					<path
						d="M35 35c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
					<path
						d="M45 50c-6 2-12 4-18 5-2 0-4-2-6-3 1-1 2-3 3-4 11-3 22-7 32-10 2-1 4 1 6 2-1 1-2 4-3 4-4 2-9 4-14 6z"
						fill="#EF7F71" filter="url(#blurMe)"></path>
				</svg>
			</div>

			<div class="snow">
				<div class="mountain-cap-1"></div>
				<div class="mountain-cap-2"></div>
				<div class="mountain-cap-3"></div>
				<div class="mountain-cap-4"></div>
				<div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: "ava"
	}
</script>

<style>
	.face {
		position: relative;
		width: 300px;
		height: 350px;
		background-color: #6C757D;
		background: linear-gradient(180deg, #452824 184px, #f2bbad 34px);
		/* transform: translateX(0px); */
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		border-bottom-left-radius: 250px 250px;
		border-bottom-right-radius: 250px 250px;
		border: 5px solid black;
	}

	.hairs {
		height: 180px;
		background-color: #f2bbad;
		position: absolute;
		width: 290px;
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		top: 25px;
	}

	.snow {
		transform: translateX(150px);
		transform-origin: right;
	}

	.mountain-cap-1,
	.mountain-cap-2,
	.mountain-cap-3,
	.mountain-cap-4 {
		position: absolute;
		top: 20px;
		border-left: 20px solid transparent;
		border-right: 20px solid transparent;
		border-top: 40px solid #452824;
	}

	.mountain-cap-1 {
		left: -65px;
	}

	.mountain-cap-2 {
		left: -35px;
	}

	.mountain-cap-3 {
		left: -5px;
	}

	.mountain-cap-4 {
		left: 25px;
	}

	.earL {
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		border-bottom-left-radius: 250px 250px;
		border-bottom-right-radius: 250px 250px;
		height: 70px;
		width: 50px;
		background-color: #f2bbad;
		position: absolute;
		left: -30px;
		top: 150px;
		z-index: -1;
		border: 5px solid black;
	}

	.earR {
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		border-bottom-left-radius: 250px 250px;
		border-bottom-right-radius: 250px 250px;
		height: 70px;
		width: 50px;
		background-color: #f2bbad;
		position: absolute;
		right: -30px;
		top: 150px;
		z-index: -4;
		border: 5px solid black;
	}

	.eyeR {
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		border-bottom-left-radius: 250px 250px;
		border-bottom-right-radius: 250px 250px;
		height: 10px;
		width: 10px;
		background-color: black;
		position: absolute;
		left: 128px;
		top: 120px;
		z-index: 2;
		animation: blinkR 5s infinite linear;
	}

	.eyeL {
		border-top-right-radius: 250px 350px;
		border-top-left-radius: 250px 350px;
		border-bottom-left-radius: 250px 250px;
		border-bottom-right-radius: 250px 250px;
		height: 10px;
		width: 10px;
		background-color: black;
		position: absolute;
		right: 128px;
		top: 120px;
		z-index: 2;
		animation: blinkL 5s infinite linear;
	}

	.nose {
		background: #fefefe;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		color: #0F0;
		position: absolute;
		top: 220px;
		left: 140px;
		scale: 1 1;
		transition: all ease-in-out .3s;
		z-index: 100;
	}

	.nose:hover {
		scale: 1 1.25;
		top: 236px;
	}

	.nose:active {
		animation: propeller .5s infinite linear;
		transform-origin: 50% -55px;
		scale: 1 1.25;
		top: 220px;
		animation-delay: .5s;
	}

	@keyframes propeller {
		to {
			transform: rotateZ(360deg);
		}
	}

	@keyframes blinkL {
		98% {
			height: 10px;
			width: 10px;
			right: 128px;
			top: 120px;
		}

		100% {
			height: 3px;
			width: 11px;
			right: 126px;
			top: 123px;
		}
	}

	@keyframes blinkR {
		98% {
			height: 10px;
			width: 10px;
			left: 128px;
			top: 120px;
		}

		100% {
			height: 3px;
			width: 11px;
			left: 126px;
			top: 123px;
		}
	}

	.nose:before {
		content: "";
		position: absolute;
		top: -64px;
		left: 50%;
		border: 10px solid transparent;
		border-bottom: 62px solid #fefefe;
		transform: translateX(-50%);
	}

	.mouth {
		position: absolute;
		top: 300px;
		left: 140px;
		background: #a36655;
		width: 25px;
		height: 18px;
		border: 5px solid black;
		border-radius: 50%;
		transition: all .3s linear;
	}

	.face:active .mouth {
		top: 290px;
		width: 60px;
		height: 25px;
		left: 123px;
		border-radius: 7px 7px 130px 130px;
	}

	.face:active .smileL {
		height: 30px;
		width: 30px;
	}

	.face:active .smileR {
		height: 30px;
		width: 30px;
	}

	.bo {
		z-index: 10;
		zoom: 0.8;
	}

	.smileL {
		position: absolute;
		height: 0px;
		width: 0px;
		rotate: 310deg;
		top: 180px;
		left: 70px;
		transition: all .1s linear;
	}

	.smileR {
		position: absolute;
		height: 0px;
		width: 0px;
		rotate: 310deg;
		top: 180px;
		right: 70px;
		transition: all .1s linear;
	}
</style>